<template>
  <div class="evaluate-reply">
    <el-input
      type="textarea"
      v-model="reply.content"
      rows="6"
      ref="replyContentRef"
    ></el-input>
    <!-- 操作栏 -->
    <div class="operate-bar">
      <div class="imageBox">
        <img
          :src="faceImg"
          alt=""
          @click="displayEmoji"
        />
      </div>

      <el-button class="reply-commit" type="success" @click="replyCommit"
        >提交回复</el-button
      >
    </div>
    <picker
      class="emoji-input"
      style="width: 100%; height: 150px"
      v-show="emojiShow"
      :include="['people']"
      @select="addEmoji"
      :showPreview="false"
      :showCategories="false"
      :showSearch="false"
      set="emojione"
    />
  </div>
</template>

<script>
import { Picker } from 'emoji-mart-vue'
import faceImg from '@/assets/img/face.png'
export default {
  name: 'evaluate-reply',
  props: {
    reply: Object,
  },
  components: {
    Picker,
  },
  data() {
    return {
      faceImg: faceImg,
      emojiShow: false,
    }
  },
  methods: {
    addEmoji(e) {
      const textarea =
        this.$refs['replyContentRef'].$el.querySelector('textarea')
      const start = textarea.selectionStart // 记录光标开始的位置
      const end = textarea.selectionEnd // 记录选中的字符 最后的字符的位置
      if (start === undefined || end === undefined) return
      const txt = textarea.value
      // 将表情添加到选中的光标位置
      const result = txt.substring(0, start) + e.native + txt.substring(end)
      textarea.value = result // 赋值给input的value
      // 重置光标位置
      textarea.focus()
      textarea.selectionStart = start + 2
      textarea.selectionEnd = start + 2
      this.reply.content = result
    },
    displayEmoji() {
      this.emojiShow = !this.emojiShow
    },
    replyCommit() {
      // 提交评论
      console.log(this.reply.content)
      this.$http({
        url: this.$http.adornUrl('/mall/evaluateinfo/save'),
        method: 'post',
        data: this.$http.adornData(this.reply),
      }).then((res) => {
        if (res.data.code !== 0) {
          this.$notify({
            title: '回复',
            type: 'error',
            message: '回复失败！',
          })
        } else {
          this.$notify({
            title: '回复',
            type: 'success',
            message: '回复成功！',
          })
          this.reply = ''
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.evaluate-reply {
  position: relative;
  margin: 10px 0;

  .operate-bar {
    border: 1px solid #dcdfe6;
    border-top: none;
    height: 40px;
    font-size: 24px;

    .imageBox {
      display: flex;
      align-items: center;
      height: 40px;
      width: 40px;
      margin-left: 10px;
      img {
        height: 30px;
        width: 30px;
        &:hover {
          transform: scale(1.1);
        }
      }
    }

    .reply-commit {
      float: right;
      margin: 1px 0;
    }
  }

  /deep/ .el-textarea__inner {
    border-radius: 4px 4px 0 0;
  }
}
</style>
